import { useState } from "react";
import "./loginCss.less";
import { loginPost } from "./login";
import { Input } from "antd";
import { useNavigate } from "react-router-dom";
function Login() {
  const navigate = useNavigate();
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");


  /**
   * 登录按钮的点击事件处理函数
   * 
   * 该函数在用户点击登录按钮时被调用，用于执行登录操作。
   * 它会调用 `loginPost` 函数，并传递用户名和密码作为参数。
   * 如果登录成功，则执行相应的操作；如果登录失败，则执行相应的操作。
   * @returns {void}
   */
  const LoginBtn =  async() => {
    // 登录
    let isLogin =  loginPost(userName, password);
    if(await isLogin){
      // 登录成功
      console.log("登录成功")
      navigate("/home");
    }else{
      // 登录失败
      console.log("登录失败")
    }
  };

  //  <Routes>
  //                               {/* <Route path={selectedPath} /> */}
  // </Routes>


  /**
   * 设置密码的函数。
   * 
   * @param {string} password - 要设置的密码字符串。
   * 
   * 该函数接收一个字符串类型的参数 `password`，并将其传递给 `setPassword` 函数。
   */
  const passwordQure = (password: string) => {
    setPassword(password);
  }


  /**
   * 根据传入的用户名调用setUserName函数设置用户名。
   * 
   * @param {string} userName - 要设置的用户名。
   */
  const userNameQuer = (userName: string) => {
    setUserName(userName);
  }

  return (
    <>
      <div className="login_box">
        <div className="title">欢迎进入</div>
        <div className="input_box">
          <Input
            className="inputs"
            placeholder="账号"
            onInput={(e: any) => userNameQuer(e.target.value)}
          />
          <Input
            className="inputs"
            type="password"
            placeholder="密码"
            onInput={(e: any) => passwordQure(e.target.value)}
          />
        </div>
        <div className="login_btn" onClick={() => LoginBtn()}>
          登录
        </div>
      </div>
    </>
  );
}
export default Login;
